<script>
import { mapState } from 'vuex';
import { isMobile } from '@/utils/uaagent';

export default {
  data() {
    return {
      show: false,
      isMobile: isMobile(),
    };
  },
  computed: {
    ...mapState({
      firstUrl: (state) => state.config.firstUrl || [],
      secondUrl: (state) => state.config.secondUrl || [],
      oneTry: (state) => state.oneTry,
      version: (state) => state.version,
    }),
    install() {
      if (this.firstUrl.length > 1) return this.firstUrl[0];
      return [];
    },
    other() {
      const data = [...this.firstUrl];

      data[2].text = '腾讯云618采购季';
      data[2].url = 'https://cloud.tencent.com/act/pro/618season?fromSource=gwzcw.6675828.6675828.6675828&utm_medium=cpa&utm_id=gwzcw.6675828.6675828.6675828';
      data.shift();
      if (this.firstUrl.length >= 2) return data;
      return [];
    },
  },
  mounted() {
    this.$store.dispatch('getVersion');
  },
  methods: {
    handleOneTry() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '生成中',
      });
      this.$store
        .dispatch('getOneTry')
        .then((res) => {
          this.$toast.clear();
          if (res.code === 0) {
            this.show = true;
          } else {
            this.$toast('请稍后再试，正在排队中!');
          }
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast('请稍后再试');
        });
    },
    skip(item) {
      window.open(item.url);
    },
    handleClick(e) {
      this.$eventbus.emit('discuz-nav-click', e);
    },
    handleLeave(e) {
      this.$eventbus.emit('discuz-nav-leave', e);
    },
  },
};
</script>

<template>
  <div class="dzq-index__banner">
    <div class="dzq-index__banner-inner">
      <div class="dzq-index__banner-list__main">
        <div class="dzq-index__banner-list">
          <div class="dzq-index__banner-img">
            <div class="dzq-layout__box">
              <div class="dzq-index__banner-aciton">
                <button class="dzq-btn" @click="skip(install)">{{ install.text }}</button>
                <!-- <button class="dzq-btn dzq-btn--weak" @click="handleOneTry">一键试用</button> -->
                <button
                  v-for="(item, index) in other"
                  :key="index"
                  class="dzq-btn dzq-btn--weak"
                  @click="skip(item)"
                >
                  {{ item.text }}
                </button>
              </div>
              <div v-show="version" class="dzq-index__banner-info">版本号：{{ version }}</div>
              <div class="dzq-index__banner-info">
                <ul class="dzq-index__banner-more">
                  <li v-for="(item, index) in secondUrl" :key="index">
                    <a :href="item.url">{{ item.text }}</a>
                  </li>
                  <li>
                    <a :target="isMobile ? '' : '_blank'" href="https://discuz.chat">官方论坛</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-dialog v-model="show" title="提示">
      <p>Discuz! Q试用已开通</p>
      <p>账号：{{ oneTry.username }}</p>
      <p>密码：{{ oneTry.password }}</p>
      <p>
        前台地址：
        <a :href="oneTry.url" target="_blank">{{ oneTry.url }}</a>
      </p>
      <p>
        后台地址：
        <a :href="`${oneTry.url}/admin`" target="_blank">{{ oneTry.url }}/admin</a>
      </p>
    </van-dialog>
  </div>
</template>

<style lang="scss">
@media screen and (min-width: 600px) {
  .van-dialog {
    width: 500px;
  }
}
.van-dialog__content {
  padding: 15px 20px;
}
</style>
